<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章管理</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.css">

<style type="text/css">
/* 限制文章详情中图片的大小，最大宽度为400px */
 img {
	max-width:400px;
}

</style>
</head>
<body>
	<div class="container">
	
			<form action="/admin/articles" method="post">
				文章审核状态：
				<input type="radio" name="status" value="0" ${article.status==0?"checked":"" }>待审
				<input type="radio" name="status" value="1" ${article.status==1?"checked":"" }>已审
				<input type="radio" name="status" value="-1" ${article.status==-1?"checked":"" }>驳回
				<input type="radio" name="status" value="2" ${article.status==null||article.status==2?"checked":"" }>全部
				<input type="button" onclick="query()" value="查询">			
			</form>
			
			<table class="table">
				<tr>
					<td>序号</td>
					<td>文章标题</td>
					<td>作者</td>
					<td>发布时间</td>
					<td>所属栏目</td>
					<td>所属分类</td>
					<td>热门</td>
					<td>状态</td>
					<td>操作</td>
				</tr>
				
				<c:forEach items="${info.list}" var="article" varStatus="i">
					<tr>
						<td>${i.count }</td>
						<td>${article.title }</td>
						<td>${article.userName }</td>
						<td><fmt:formatDate value="${article.created }" pattern="yyyy-MM-dd"/></td>
						<td>${article.channelName }</td>
						<td>${article.categoryName }</td>
						<td>
							<c:if test="${article.hot==0 }">
								<input type="button" class="btn btn-success" onclick="updateHot('${article.id}',this)" value="否">
							</c:if>
							<c:if test="${article.hot==1 }">
								<input type="button" class="btn btn-danger" onclick="updateHot('${article.id}',this)" value="是">
							</c:if>
						</td>
						<td>${article.status==1?"已审核":article.status==0?"未审核":"审核未通过" }</td>
						<td>
							<button type="button" onclick="detail(${article.id})" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" >详情</button>
						</td>
					</tr>
				</c:forEach>
			</table>
			
				
			
		
		<!-- 加载分页页面 -->
		<jsp:include page="/WEB-INF/view/common/pages.jsp"></jsp:include>
		
	</div>
	
	
	<!-- 文章详情的模态框 -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel"></h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body" id="content">
	       	
	      </div>
	      <div class="modal-footer">
	      	<button type="button" class="btn btn-success" onclick="update(1)">同意</button>
	      	<button type="button" class="btn btn-primary" onclick="update(-1)">驳回</button>
	        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>
</body>
<script type="text/javascript">
	
	var articleId = "";

	//查询文章详情
	function detail(id){
		
		//将文章id赋值给全局变量
		articleId = id;
		
		//使用ajax查询数据
		$.post(
			"/my/detail",
			{id:id},
			function(article){
				//展示数据
				//设置标题
				$("#exampleModalLabel").html(article.title);
				
				//设置内容
				$("#content").html(article.content);
				
			}
		)
	}
	
	//分页
	function goPage(pageNum){
		
		//获取form表单中的查询数据
		
		//location="/admin/articles?pageNum="+pageNum + "&" + $("form").serialize();
		//整合管理员中心首页以后
		$("#center").load("/admin/articles?pageNum="+pageNum + "&" + $("form").serialize());
	}
	
	//查询文章
	function query(){
		
		$("#center").load("/admin/articles?"+ $("form").serialize());
	}
	
	//修改文章状态
	function update(status){
		
		//使用ajax异步修改状态
		$.post(
			"/admin/update",
			{status:status,id:articleId},
			function(result){
				
				if(result){
					//修改成功
					//location="/admin/articles";
					
					//重新加载页面
					window.location.reload();
				}else{
					alert("审核失败");
				}
			}
		)
	}
	
	//修改热门状态
	function updateHot(id,obj){
		//获取按钮显示的文字，根据文字，获取要修改成的热门状态
		var hot = $(obj).val()=="是"?0:1;
		
		//使用ajax修改
		$.post(
			"/admin/update",
			{id:id,hot:hot},
			function(result){
				
				if(result){
					//修改按钮的文字和样式
					if($(obj).val()=="是"){
						//将文字修改
						$(obj).val("否");
						
						//修改按钮样式
						$(obj).removeClass("btn-danger");
						$(obj).addClass("btn-success");
					}else{
						
						//如果原来不是热门
						$(obj).val("是");
						
						//修改按钮样式
						$(obj).removeClass("btn-success");
						$(obj).addClass("btn-danger");
					}
					
				}else{
					alert("修改失败");
				}
				
			}
		)
		
	}
	
</script>
</html>

